<template>
  <div>
    <div class="custom-scrollbar">
      <header class="header">
        <div class="flex-1">
          <div style="color: #8cf7ff; font-size: 20px; font-weight: 700">
            Management Dashboard – {{ departmentName }} Shop Floor
          </div>
        </div>
        <!-- <div style="display: flex; align-items: flex-start; font-size: 0">
          <div
            style="
              font-family: ArchivoBlack-Regular-2;
              /* align-self: flex-start; */
              color: #fff;
              text-align: center;
              font-size: 22px;
              background: #2e75b6;
              font-weight: 600;
              padding: 5px 50px;
              margin-right: 20px;
              box-sizing: border-box;
              border-radius: 50px;
            "
          >
            <span v-html="dateTimeStr"></span>
          </div>
          <p
            style="
              font-size: 14px;
              text-indent: 3rem;
              font-style: italic;
              margin: 0 20px;
            "
          >
            First choice for <br />
            advanced applications
          </p>
          <figure style="width: 140px">
            <a href="/"
              ><img
                style="width: 50%"
                src="../../../assets/images/logo1.png"
                alt=""
                srcset=""
            /></a>
          </figure>
        </div> -->
      </header>
      <div class="flex-1 flex">
        <section class="section">
          <ul class="card" style="margin: 0">
            <li v-for="(item, index) in dataList" :key="item.foremanType">
              <div class="inn">
                <div class="title">
                  <p>{{ item.name }}</p>

                  <span v-if="item.openTaskQty" style="cursor: pointer">{{
                    item.openTaskQty
                  }}</span>

                  <!-- @click="goForemanAction(item)" -->
                </div>
                <div
                  class="innt"
                  :class="item.isNormal ? 'bgcolor1' : 'bgcolor2'"
                  @click="goForemanItem(item, index)"
                >
                  <div
                    class="showData"
                    style="height: 100%; padding: 10px"
                    v-if="item.foremanType == 'ShiftHandover'"
                    ref="scrollBox"
                  >
                    <p
                      style="font-size: 14px"
                      v-html="
                        item.strActual.replace(
                          /font-size: (\d+)pt;/g,
                          (match, p1) => {
                            return p1 >= 24
                              ? `font-size: ${Math.floor(p1 / 2)}pt;`
                              : ``;
                          }
                        )
                      "
                      ref="scrollText"
                    ></p>
                  </div>
                  <div class="showData" v-else>
                    <div class="keyl">
                      <span>
                        {{ item.percentage }}
                      </span>
                    </div>
                    <div class="keyr">
                      <div class="key10">
                        <span class="key11">Act</span>
                        <span> {{ item.strActual }}</span>
                        <span
                          style="
                            margin-left: 20px;
                            display: inline-block;
                            font-size: 18px;
                          "
                          >{{ item.unit }}</span
                        >
                      </div>
                      <div class="key10">
                        <span class="key11">Tgt</span>
                        <span> {{ item.strTarget }}</span
                        ><span
                          style="
                            margin-left: 20px;
                            display: inline-block;
                            font-size: 18px;
                          "
                          >{{ item.unit }}</span
                        >
                      </div>
                    </div>
                  </div>
                  <div class="config" v-if="item.isDisplayConfig">
                    <p v-if="item.foremanType == 'SafetyLwdCase'">
                      Frequency : <span>Weekly</span>
                    </p>

                    <p v-else>
                      Frequency :
                      <span>{{ item.dataUpdateFrequency }}</span> Mode :
                      <span>{{ item.dataStatisticsMode }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </div>
      <div class="bgc"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Button } from "vant";

export default {
  name: "Login",
  components: { Button },
  data() {
    return {
      currentFacility: "",
      departmentName: JSON.parse(sessionStorage.getItem("currentDepartment"))
        .name,
      dataList: [],
    };
  },
  mounted() {
    this.getLang();
    this.getInfo();
    this.$nextTick(() => {
      setTimeout(() => {
        // 元素下的子元素是对象需要转换为数组
        const childrenDom = Object.values(this.$refs.scrollText[0].children);
        // 获取要滚动元素中的所有元素并且计算出高度的和
        const childrenHeight = childrenDom.reduce(
          (sum, item) => (sum += item.scrollHeight),
          0
        );
        console.log(childrenHeight, this.$refs.scrollBox[0].clientHeight);
        // 判断文本内容是否超出容器宽度
        if (childrenHeight > this.$refs.scrollBox[0].clientHeight - 20) {
          // 复制一份 并且有三行间隔
          this.$refs.scrollText[0].innerHTML += `<br/><br/>${this.$refs.scrollText[0].innerHTML}`;
          this.$refs.scrollText[0].innerHTML += `<br/><br/>${this.$refs.scrollText[0].innerHTML}`;

          this.$refs.scrollText[0].classList.add("marquee-text-animation"); // 添加滚动样式
        } else {
          this.$refs.scrollText[0].classList.remove("marquee-text-animation"); // 移除滚动样式
        }
      }, 300);
    });
  },
  methods: {
    getLang() {
      this.currentFacility = localStorage.getItem("currentFacility");
    },
    async getInfo() {
      const res = await axios.post("/SicCore/GetForemans", {
        isDisplay: true,
        isHome: true,
      });
      this.dataList = res.items;
    },
    goForemanItem(item, index) {
      console.log(item, index);
      let isShowOneTable = false;
      if (item.foremanType == "ShiftHandover") {
        isShowOneTable = true;
      }
      this.$router.push({
        path: "/shopFloorItem",
        query: {
          type: item.foremanType,
          foremanActualId: item.foremanActualId,
          isNormal: !item.isNormal,
          isShowOneTable,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.bgc {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: url(./images/bg.jpg) no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}
.custom-scrollbar {
  position: relative;
  padding-bottom: 50px;
  > .header {
    padding: 10px 20px 0;
    position: relative;
    display: flex;
    color: #fff;
    font-size: 54px;
    text-align: center;
  }

  .section {
    // min-width: 1486px;
    .card {
      display: flex;
      flex-wrap: wrap;
      > li {
        width: 50%;
        padding: 0 5px;
        margin-bottom: 10px;

        > .inn {
          .title {
            position: relative;
            margin-bottom: 10px;
            padding: 10px 0px;
            background: linear-gradient(to right, #043b6e, #375624);
            color: #fff;
            font-size: 14px;
            font-family: Cascadia-Code-Regular-2;
            padding-left: 0.5em;
            p {
              margin: 0;
            }
            span {
              position: absolute;
              right: 2px;
              top: 10px;
              display: inline-block;
              width: 20px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              border-radius: 20px;
              background-color: #fe0000;
            }
          }

          .innt {
            position: relative;
            height: 110px;
            display: flex;
            background-color: #fff;
            cursor: pointer;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .showData {
              overflow: hidden;
              width: 100%;
              display: flex;
              justify-content: space-around;
            }
            .config {
              font-size: 12px;
              padding: 0 0 5px;
              position: absolute;
              bottom: -1px;
              p {
                margin: 0;
              }
              span {
                color: #fff;
                padding-right: 2px;
              }
            }
            .keyl {
              text-align: center;
              font-size: 24px;
              color: #fff;
              font-family: Fonarto-Bold-3;
              line-height: 56px;
            }
            .keyl1 {
              padding-left: 20px;
              text-align: left;
              font-size: 24px;
              font-family: Cascadia-Code-Regular-2;
            }
            .keyr {
              color: #fff;
            }

            .key10 {
              > span:nth-child(1) {
                margin-right: 8px;
                font-size: 14px;
                color: #000;
                font-family: Cascadia-Code-Regular-2;
              }

              > span:nth-child(2) {
                font-size: 16px;
                font-family: Fonarto-Bold-3;
              }
            }

            .key11 {
            }
          }

          .bgcolor1 {
            background: linear-gradient(
              to right,
              #2dbe79 65%,
              hsla(151, 62%, 46%, 0.5)
            ) !important;
          }
          .bgcolor2 {
            background: linear-gradient(
              to right,
              #ff0000 65%,
              hsla(0, 100%, 50%, 0.5)
            ) !important;
          }
        }
      }
    }
  }
}
.marquee-text-animation {
  animation: marquee 25s linear infinite;
  /* 滚动动画，时间可根据需要调整 */
}

@keyframes marquee {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-205%);
  }
}
</style>
